<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>

  <body>
    <main id="webchat"></main>
    <script>
      run(async function () {
        const {
          WebChat: { renderWebChat }
        } = window; // Imports in UMD fashion.

        customElements.define(
          'my-world',
          class extends HTMLElement {
            connectedCallback() {
              this.append('🌎');
            }
          }
        );

        const allowCustomElementsTransform = () => next => request =>
          next({
            ...request,
            allowedTags: Object.freeze(
              new Map(request.allowedTags).set('my-world', Object.freeze({ attributes: Object.freeze([]) }))
            )
          });

        const { directLine, store } = testHelpers.createDirectLineEmulator();

        renderWebChat(
          { directLine, htmlContentTransformMiddleware: [allowCustomElementsTransform], store },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        await directLine.emulateIncomingActivity({
          // Custom elements must not be self-closing.
          text: `Hello, <my-world></my-world>!`,
          type: 'message'
        });

        await pageConditions.numActivitiesShown(1);

        // THEN: Should show as "Hello, 🌎!".
        expect(pageElements.activityContents()[0].textContent).toBe('Hello, 🌎!');
        await host.snapshot('local');
      });
    </script>
  </body>
</html>
